
<template>
    <div class='details'>
        <div><h2>项目经历</h2><span style="font-size:12px;color:#bbb">已授权</span></div>
            

        <!-- <div class='details-box' v-for="(item) in imgDataList" :key="item">
            <div class="box">
                <el-image 
                    class=""
                    :src="item[1]"
                    :preview-src-list="item"
                    :initial-index="4"
                    fit="cover"
                />
                <span>IMS物流管理</span>
            </div>
        </div> -->

        <!-- <div class='details-box'  v-show="showFlag"> -->
        <div class='details-box' >
            <div class="box" @click="boxClick('dingding-H5')">
                <el-image 
                    class=""
                    :src="require('../img/ddH5-1.png')"
                    :preview-src-list="imgDataList.h5List"
                    :initial-index="4"
                    fit="cover"
                />
                <span>钉钉后台移动端网页</span>
            </div>
            <div class="box" @click="boxClick('ims')">
                <el-image 
                    class=""
                    :src="require('../img/IMS物流管理1.png')"
                    :preview-src-list="imgDataList.imsList"
                    :initial-index="4"
                    fit="cover"
                />
                <span>IMS物流</span>
            </div>
            <div class="box" @click="boxClick(2)">
                <el-image 
                    class=""
                    :src="require('../img/钉钉PC.png')"
                    :preview-src-list="imgDataList.ddList"
                    :initial-index="4"
                    fit="cover"
                />
                <span>钉钉PC</span>
            </div>
            <div class="box" @click="boxClick(3)">
                <el-image 
                    class=""
                    :src="require('../img/教师端词汇宝1.png')"
                    :preview-src-list="imgDataList.chbList"
                    :initial-index="4"
                    fit="cover"
                />
                <span>教师词汇宝</span>
            </div>
            <div class="box" @click="boxClick(4)">
                <el-image 
                    class=""
                    :src="require('../img/任务系统1.png')"
                    :preview-src-list="imgDataList.rwxtList"
                    :initial-index="4"
                    fit="cover"
                />
                <span>任务系统</span>
            </div>
            <div class="box" @click="boxClick(5)">
                <el-image 
                    class=""
                    :src="require('../img/云后台1.png')"
                    :preview-src-list="imgDataList.yfwList"
                    :initial-index="4"
                    fit="cover"
                />
                <span>云服务平台</span>
            </div>
            <div class="box" >
                <el-image 
                    class=""
                    :src="require('../img/NCcloud1.jpg')"
                    :preview-src-list="imgDataList.NCcloudList"
                    :initial-index="4"
                    fit="cover"
                />
                <span>维宏云</span>
            </div>
        </div>
    </div>
</template>
<script >
export default ({
    name:'',
    components: {

    },
    data(){
        return{
            imgDataListName:{
                h5List:'钉钉移动端网页',
                imsList:'IMS物流管理',
                ddList:'钉钉PC',
                chbList:'教师端词汇宝',
                rwxtList:'任务系统',
                yfwList:'云服务前后台',
            },
            imgDataList:{
                h5List:[
                    require('../img/ddH5-1.png'),
                    require('../img/ddH5-2.png'),
                    require('../img/ddH5-3.png'),
                    require('../img/ddH5-4.png'),
                    require('../img/ddH5-5.png'),
                    require('../img/ddH5-6.png'),
                    require('../img/ddH5-7.png'),
                ],
                imsList:[
                    require('../img/IMS物流管理1.png'),
                    require('../img/IMS物流管理2.png'),
                ],
                ddList:[
                    require('../img/钉钉小程序.png'),
                    require('../img/钉钉PC.png'),
                    require('../img/钉钉后台.png'),
                ],
                chbList:[
                    require('../img/教师端词汇宝1.png'),
                    require('../img/教师端词汇宝2.png'),
                    require('../img/教师端词汇宝3.png'),
                    require('../img/教师端词汇宝4.png'),
                    require('../img/教师端写作宝1.png'),
                ],
                rwxtList:[
                    require('../img/任务系统1.png'),
                    require('../img/任务系统2.png'),
                    require('../img/任务系统3.png'),
                    require('../img/任务系统4.png'),
                    require('../img/任务系统5.png'),
                    require('../img/任务系统6.png'),
                ],
                yfwList:[
                    require('../img/云后台1.png'),
                    require('../img/云后台2.png'),
                    require('../img/云后台3.png'),
                    require('../img/云前台1.png'),
                    require('../img/云前台2.png'),
                    require('../img/云前台3.png'),
                ],
                NCcloudList:[
                    require('../img/NCcloud1.jpg'),
                    require('../img/NCcloud2.jpg'),
                    require('../img/NCcloud3.jpg'),
                    require('../img/NCcloud4.jpg'),
                    require('../img/NCcloud5.jpg'),
                    require('../img/NCcloud6.jpg'),
                    require('../img/NCcloud7.jpg'),
                    require('../img/NCcloud8.jpg'),
                    require('../img/NCcloud9.jpg'),
                    require('../img/NCcloud10.jpg'),
                ],
                // UnionPay:[
                //     require('../img/UnionPay.png'),
                // ],
            },
        }
    },
    methods:{
        boxClick(key){
            key
            // this.curSrcList = this.srcList[key]
            // this.showFlag = !this.showFlag;
        //     this.showIndex = num;
        },
    }
})
</script>
<style lang="scss"  scoped>
.el-carousel__item h3 {
  color: #f3e6f1;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.details{
  float: right;
  background-color:#eee;
  width:1200px;
  height: 700px;
  border-radius:20px;	
  padding: 40px;
  .details-box{
    margin-top: 20px;
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    .box{
        cursor: pointer;
        flex: 1;
        overflow: hidden;
        transition: .5s;
        margin: 0 20px;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
        border-radius: 20px;
        border: 10px solid #fff;
        background-color: #fff;
    }
    .box>img{
        width: 200%;
        height: 85%;
        object-fit: cover;
        transition: .5s;
    }
    // .box /deep/ .el-image{
    //     width: 200%;
    //     height: 85%;
    //     object-fit: cover;
    //     transition: .5s;
    // }
    .box>span{
        font: 100 20px '优设标题黑';
        text-align: center;
        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box:hover{
        flex-basis: 28%;
    }
    .box:hover>img{
        width: 100%;
        height: 100%;
    }
    // .box:hover /deep/ .el-image{
    //     width: 100%;
    //     height: 100%;
    // }

  .carousel{
    height: 500px;
    margin-top:60px;
  }
//   .content{
//     padding: 15px;
//     font-size: 14px;
//   }
//   .back-img-1{
//     background: url("../img/云前台1.png") no-repeat;
//   }
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
}
</style>